<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        .box{
            width: 500px;
            margin: 0 auto;
        }
        .content{
            line-height: 30px;
        }
        .right{
            float: right;
        }
        .right strong{
            font-size: 26px;
            color: orange;
        }
        .input .text{
            width: 100%;
            height: 120px;
            resize: none;
            border: 1px solid #aaa;
            box-shadow: 0 0 5px #ccc inset;
            padding: 10px;
            font-size: 16px;
        }
        .text:focus{
            border-color: #f93;
            outline: none;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <span>有什么新鲜事想告诉大家</span>
            <span class="right">可以发布超过<strong>140</strong>字的微博了</span>
        </div>
        <div class="input"><textarea name="" class="text"></textarea></div>
    </div>
</body>
</html>
<script>
    // 输入内容时计算字数
    $('.text').keyup(textnum);
    // 获取输入焦点时计算字数
    $('.text').focus(textnum);

    // 计算字数的方法
    function textnum(){
        // 获取输入文字的长度
        var len=$(this).val().length;
        // 表示当前输入文字的总长度 一个中文字符是一个文字 两个英文字符是一个文字
        var current=0
        if(len>0){
            for(var i=0;i<len;i++){
                if($(this).val().charCodeAt(i)>255){
                    // 中文字符
                    current++;
                }else{
                    // 英文字符
                    current+=0.5;
                }
            }
            console.log(current);
        }
        var re=Math.ceil(current);
            if(re<140){
                $('.right').html('已输入<strong style="color:gray">'+re+'</strong>个字');
            }else{
                $('.right').html('已输入<strong style="color:deeppink">'+re+'</strong>个字');
            }
    }
</script>